(function($){
    
    var _resizeHandles = [
        '<div class="jcrop-hline"></div>',
        '<div class="jcrop-hline bottom"></div>',
        '<div class="jcrop-vline right"></div>',
        '<div class="jcrop-vline"></div>',          
    
        '<div style="cursor: n-resize; z-index: 370;" class="ord-n jcrop-dragbar"></div>',
        '<div style="cursor: s-resize; z-index: 371;" class="ord-s jcrop-dragbar"></div>',
        '<div style="cursor: e-resize; z-index: 372;" class="ord-e jcrop-dragbar"></div>',
        '<div style="cursor: w-resize; z-index: 373;" class="ord-w jcrop-dragbar"></div>',
        
        '<div style="cursor: n-resize; z-index: 374;" class="ord-n jcrop-handle"></div>',
        '<div style="cursor: s-resize; z-index: 375;" class="ord-s jcrop-handle"></div>',
        '<div style="cursor: e-resize; z-index: 376;" class="ord-e jcrop-handle"></div>',
        '<div style="cursor: w-resize; z-index: 377;" class="ord-w jcrop-handle"></div>',
        
        '<div style="cursor: nw-resize; z-index: 378;" class="ord-nw jcrop-handle"></div>',
        '<div style="cursor: ne-resize; z-index: 379;" class="ord-ne jcrop-handle"></div>',
        '<div style="cursor: se-resize; z-index: 380;" class="ord-se jcrop-handle"></div>',
        '<div style="cursor: sw-resize; z-index: 381;" class="ord-sw jcrop-handle"></div>',    
    ].join('');
    
    $.fn.resizable = (function() {
            
        return function(config) {
            
            var _this = $(this),
                _mousedownPos,
                _mousedownEle,
                _container = document.body;
            
            if(!config){
                config = {};
            }
            
            $(_resizeHandles).appendTo(_this).bind({
                'mousedown' : function(e) {  
                    if($(e.target).closest('.resizable').length){                              
                        _mousedownPos = {
                            x : e.pageX,
                            y : e.pageY
                        };
                        _mousedownEle = $(this);   
                        _this.addClass('resizing');
                    }             
                }          
            });
    
            $(_container).bind( {
                'mousemove' : function(e) {
        
                    if (_mousedownPos) {
                        
                        var $this = _mousedownEle.parent(), 
                            increaseX = e.pageX - _mousedownPos.x, 
                            increaseY = e.pageY - _mousedownPos.y, 
                            left = parseInt($this.css('left')), 
                            top = parseInt($this.css('top')), 
                            width = parseInt($this.css('width')), 
                            height = parseInt($this.css('height'));
        
                        _mousedownPos = {
                            x : e.pageX,
                            y : e.pageY
                        };
                        
                        //----------------------------------------------------------------------------------
                        
                        var handleLogic = {
                            'north' : function(){                            
                                $this.css('top', top + increaseY).css('height', height - increaseY);
                            },
                            'south' : function(){
                                if (increaseY > 0) {
                                    $this.css('height', height + increaseY);
                                } else {
                                    $this.css('top', Math.min(top, top + height + increaseY))
                                         .css('height', Math.abs(height + increaseY));
                                }
                            },
                            'east' : function(){
                                if (increaseX > 0) {
                                    $this.css('width', width + increaseX);
                                } else {
                                    $this.css('left', Math.min(left, left + width + increaseX))
                                         .css('width', Math.abs(width + increaseX));
                                }
                            },
                            'west' : function(){
                                $this.css('left', left + increaseX ).css('width', width - increaseX );
                            }  
                        };
                        
                        //----------------------------------------------------------------------------------
                        
                        //活动元素的角度, 当前只处理90deg, 180deg, 270deg的情况.
                        var eleDeg = ( parseInt( $this.attr('deg') ) + 36000 ) % 360;                    
                        var adjustHandleLogic = {};
                        
                        if( eleDeg ){
                            if( eleDeg === 90 ){
                                adjustHandleLogic =  handleLogic;
                                var x = {
                                    'north' : handleLogic['east'],
                                    'south' : handleLogic['west'],
                                    'east' : handleLogic['south'],
                                    'west' : handleLogic['north']
                                };                            
                            } else if(eleDeg === 180){
                                adjustHandleLogic = {
                                    'north' : handleLogic['south'],
                                    'south' : handleLogic['north'],
                                    'east' : handleLogic['west'],
                                    'west' : handleLogic['east']
                                };
                                
                            } else {
                                adjustHandleLogic = handleLogic; 
                                var x = {
                                    'north' : handleLogic['west'],
                                    'south' : handleLogic['east'],
                                    'east' : handleLogic['north'],
                                    'west' : handleLogic['south']
                                };
                            }
                        } else {
                            adjustHandleLogic = handleLogic;
                        }
                        
                        //----------------------------------------------------------------------------------
                        
                        //容器元素的角度, 当前只处理90deg, 180deg, 270deg的情况.
                        var containerDeg = ( parseInt( $this.parent().attr('deg') ) + 36000 ) % 360;
                        
                        if(containerDeg){
                            if(containerDeg === 90){
                                // var temp = increaseX;
                                // increaseX = increaseY;
                                // increaseY = -temp;
                            }
                            if(containerDeg === 180){
                                // increaseX = -increaseX;
                                // increaseY = -increaseY;
                            }
                            if( containerDeg === 270 ){
                                // var temp = increaseX;
                                // increaseX = -increaseY;
                                // increaseY = +temp;
                            }
                        }
                                            
                        //----------------------------------------------------------------------------------
        
                        //north
                        if (_mousedownEle.hasClass('ord-n') || _mousedownEle.hasClass('ord-nw') || _mousedownEle.hasClass('ord-ne')) {
                            adjustHandleLogic['north']();   
                        }
        
                        //south
                        if (_mousedownEle.hasClass('ord-s') || _mousedownEle.hasClass('ord-sw') || _mousedownEle.hasClass('ord-se')) {
                            adjustHandleLogic['south']();
                        }
                        
                        //east
                        if (_mousedownEle.hasClass('ord-e') || _mousedownEle.hasClass('ord-ne') || _mousedownEle.hasClass('ord-se')) {
                            adjustHandleLogic['east']();
                        }
        
                        //west
                        if (_mousedownEle.hasClass('ord-w') || _mousedownEle.hasClass('ord-nw') || _mousedownEle.hasClass('ord-sw')) {
                            adjustHandleLogic['west']();
                        }
                    }
                },
                'mouseup' : function(e) {
                    _mousedownPos = null;
                    _mousedownEle = null;
                    _this.removeClass('resizing');
                    if(config['onResizingFinished']){
                        config['onResizingFinished'](_this);
                    }                
                }
            });
            return _this;
        };
    })();    
})($);